<template>
  <div style="margin-top: 50px">
    <el-form
      ref="Formone"
      :model="form"
      :rules="rules"
      label-width="150px"
      style="width: 600px"
    >
      <el-form-item label="商品相册：">
        <el-upload
          action="/manager/api/auth/product/upload_product"
          list-type="picture-card"
          :file-list="fileList"
          :on-success="handleUploadSuccess"
          :limit="3"
          :before-remove="beforeRemove"
          :on-exceed="handleExceed"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          v-model="dealProductPic"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="商品详情页">
        <quill-editor
          v-model="value.detailHtml"
          :options="editorOption"
        ></quill-editor>
      </el-form-item>
      <el-form-item>
        <el-button @click="xiangshang()" size="mini"
          >上一步，填写商品促销</el-button
        >
        <el-button @click="wancheng()" size="mini" type="primary"
          >完成，提交商品</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editorOption: {
        placeholder: "请输入商品的详情页....",
      },
      form: {},
      rules: {},
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  props: {
    value: Object,
  },
  methods: {
    // 通知调用者
    handleUpload(fileList) {
      let value = [];
      for (let i = 0; i < fileList.length; i++) {
        value.push(fileList[i].url);
      }
      // 通过自定义事件返回给调用者
      if (value == null || value.length === 0) {
        this.value.pic = null;
        this.value.albumPics = null;
      } else {
        this.value.pic = value[0];
        this.value.albumPics = "";
        if (value.length > 1) {
          // 说明上传的图片大于1张
          for (let i = 1; i < value.length; i++) {
            this.value.albumPics += value[i];
            if (value.length - 1 !== i) {
              this.value.albumPics += ",";
            }
          }
        }
      }
    },
    // 上传成功
    handleUploadSuccess(response, file, fileList) {
      this.fileList.push({ url: "http://localhost:5000" + response.data.name });
      this.handleUpload(this.fileList);
    },
    xiangshang() {
      this.$emit("shangbu");
    },
    wancheng() {
      this.$emit("tianjia");
    },
    //删除
    handleRemove(file, fileList) {
      this.handleUpload(fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },

  computed: {
    fileList() {
      let productValue = this.dealProductPic;
      console.log("fileList:",productValue);
      let fileList = [];
      if (productValue) {
        for (let i = 0; i < productValue.length; i++) {
          fileList.push({ url: productValue[i] });
        }
      }
      console.log(",,,",fileList);
      return fileList;
    },
    dealProductPic: {
      get() {
        let pics = [];
        if (
          this.value.pic == null ||
          this.value.pic == undefined ||
          this.value.pic == ""
        ) {
          return pics;
        }
        pics.push(this.value.pic)
        console.log(pics);
        if (
          this.value.albumPics == null ||
          this.value.albumPics == undefined ||
          this.value.albumPics == ""
        ) {
          return pics;
        }
        let albumPicsArr = this.value.albumPics.split(",");
        for (let i = 0; i < albumPicsArr.length; i++) {
          pics.push(albumPicsArr[i]);
        }
        return pics;
      },
      set(newValue) {
        console.log(newValue);
        if (newValue == null || newValue.length === 0) {
          this.value.pic = null;
          this.value.albumPics = null;
        } else {
          this.value.pic = newValue[0];
          this.value.albumPics = "";
          if (newValue.length > 1) {
            // 说明上传的图片大于1张
            for (let i = 1; i < newValue.length; i++) {
              this.value.albumPics += newValue[i];
              if (newValue.length - 1 !== i) {
                this.value.albumPics += ",";
              }
            }
          }
        }
      },
    },
  },

};
</script>

<style>
</style>